<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view>
               <!-- <video id="myVideo" :src="src"
                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn ></video> -->
					<!-- <video ref="videoElement" controls muted  > </video> -->
					<!-- :style="{width: windowWidth+'px',height : windowHeight + 'px'}" -->
				<video ref="videoElement" controls muted></video>
            </view>
            <!-- #ifndef MP-ALIPAY -->
            <view class="uni-list uni-common-mt">
                <view class="uni-list-cell">
                    <view>
                        <view class="uni-label">弹幕内容</view>
                    </view>
                    <view class="uni-list-cell-db">
                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
                    </view>
                </view>
            </view>
            <view class="uni-btn-v">
                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
            </view>
            <!-- #endif -->
        </view>
    </view>
</template>


<script>
	// import flvjs from 'flv.js'; // 导入flv.js库
	import flvjs from 'flv.js';
export default {
    data() {
        return {
            src: 'rtmp://192.168.32.239/live/tiwate',
			safeArea:0,windowHeight:0,windowWidth:0,
            danmuList: [{
                    text: '第 1s 出现的弹幕',
                    color: '#ff0000',
                    time: 1
                },
                {
                    text: '第 3s 出现的弹幕',
                    color: '#ff00ff',
                    time: 3
                }
            ],
            danmuValue: ''
        }
    },
    onReady: function(res) {
        // #ifndef MP-ALIPAY
        this.videoContext = uni.createVideoContext('myVideo')
		this.getDeviceInfo()
        // #endif
    },
    methods: {
		//获取设备信息:uni.getSystemInfo(OBJECT)
		getDeviceInfo(){
			uni.getSystemInfo({
				success: (devicedata) => {
					this.safeArea = devicedata.safeArea.top;
					console.log(this.safeArea);
					this.windowHeight = devicedata.windowHeight;
					
					this.windowWidth = devicedata.windowWidth;
		
				}
			})
		},
        sendDanmu: function() {
            this.videoContext.sendDanmu({
                text: this.danmuValue,
                color: this.getRandomColor()
            });
            this.danmuValue = '';
        },
        videoErrorCallback: function(e) {
            uni.showModal({
                content: e.target.errMsg,
                showCancel: false
            })
        },
        getRandomColor: function() {
            const rgb = []
            for (let i = 0; i < 3; ++i) {
                let color = Math.floor(Math.random() * 256).toString(16)
                color = color.length == 1 ? '0' + color : color
                rgb.push(color)
            }
            return '#' + rgb.join('')
        }
    },
	mounted() {
	  if (flvjs.isSupported()) {
	        const videoElement = this.$refs.videoElement;
	        const flvPlayer = flvjs.createPlayer({
	          type: 'flv',
	          url: 'http://192.168.33.239:4399/live/tiwate.flv'
	        });
	        flvPlayer.attachMediaElement(videoElement);
	        flvPlayer.load();
	        flvPlayer.play();
	      }
	}

}
</script>


<style lang="scss">

</style>
